<template>
  <div class="auto">
    
    <div class="cross">
      <div class="tab" v-for="(item,index) in list" :key="index">
        <img class="head" src="./images/head.jpg" />
        <div class="mess">
          <p class="name">{{item.name}}</p>
          <p>
            <span>动态</span>
            <el-divider direction="vertical"></el-divider>
            <span>关注{{item.atten}}</span>
            <el-divider direction="vertical"></el-divider>
            <span>粉丝{{item.fans}}</span>
          </p>
          <p class="intro">{{item.introductory}}</p>
        </div>
        <div class="mess-right">
            <div class="privateMessage">
            <el-button size="mini" icon="el-icon-message">发私信</el-button>
            </div>
            <div class="icon">
                <i class="el-icon-check" ></i>
                <span class="attentioned">已关注</span>   
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Attention',
  data() {
      return {
          list: [{
          name:'顾故',
          atten:12,
          fans:4,
          introductory:'这个人太懒了，什么都没有写哦'
          },
          {
          name:'南宁',
          atten:2,
          fans:40,
          introductory:'今天天气真好'
          },
          {
          name:'月满故里',
          atten:15,
          fans:14000,
          introductory:'猜猜我是谁'
          },
          {
          name:'胡说八道',
          atten:8,
          fans:5462,
          introductory:'感谢关注'
          },
          ],
      };
  },
};
</script>

<style>
.typeface {
  font-size: 20px;
}
.cross {
  width: 55vw;
}
.auto {
  width: 60vw;
  margin: 0 auto;
}
.head {
  width: 80px;
  height: 66px;
}
.tab {
  width: 27.4vw;
  height: 11vh;
  padding-top: 15px;
  display: flex;
  float: left;
  margin-left: -1px;
  margin-bottom: -1px;
  border: 1px solid rgb(199, 198, 198);
}
.mess {
  float: right;
  width: 19vw;
  margin-left: 10px;
  
}
.name {
  font-size: 18px;
  font-weight: lighter;
  margin-top: 3px;
  color: rgb(75, 194, 241);
}
el-mess{
    font-size: 10px;
}
.intro{
    margin:5px 2px;
}
.privateMessage{
    width: 85px;
    height: 35px;
}
.el-button--mini, .el-button--mini.is-round {
    width: 75px;
    height: 31px;
    text-align: center;
    line-height: 31px;
}
.icon{
    width: 70px;
    height: 20px;
    text-align: center;
}
.mess-right{
    margin-top: 10px;
}
</style>